<script>
import UFormItem from "../../../../../../uni_modules/uview-ui/components/u-form-item/u-form-item.vue";
import URow from "../../../../../../uni_modules/uview-ui/components/u-row/u-row.vue";
import {uploadFile} from "../../../../../../static/utils/uploadImg";
import {AZIMUTH} from "../../../../../../constant";
import UIcon from "../../../../../../uni_modules/uview-ui/components/u-icon/u-icon.vue";
import uSelect from "../../../../../../components/base/u-select/index.vue";
import imageUpload from "../../../../../../components/base/image-upload/index.vue";

export default {
  name: "index",
  computed: {
    AZIMUTH() {
      return AZIMUTH
    },
    formData: {
      get() {
        return this.$props.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
  },
  components: {uSelect, UIcon, URow, UFormItem, imageUpload},
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {}
  },
  methods: {
    // 公共图片上传
    async uploadImg(event, key) {
      const file = event.file;
      this[key].push({
        ...file,
        status: 'uploading',
        message: '上传中'
      })
      uploadFile('common/upload', file).then( res => {
        this.$props.formData[key] = JSON.parse(res.data).fullPath;
        this[key].splice(0, 1, Object.assign(this[key][0], {
          status: 'success',
          message: '上传成功',
          url: JSON.parse(res.data).fullPath
        }))
      })
    },
    // 删除图片
    deleteImg(key) {
      this[key] = []
    },
    noFlyImgsChange(val) {
      // this.$props.formData.noFlyImgs = noFlyImgs.join(',')
    },
  }
}
</script>

<template>
  <view class="module">
    <view class="cell module__title">
      <view class="cell-hd">
        <u-icon name="order" size="22"></u-icon>
      </view>
      <view class="cell-bd module__title__text">房屋信息</view>
    </view>

    <u-form-item
        label="房屋结构"
        prop="formData.buildingStructure"
        borderBottom
        ref="item1"
        required
    >
      <u-select
          v-model="formData.buildingStructure"
          placeholder="请选择房屋结构"
          :options="[{ label: '框架' }, { label: '砖木' }, { label: '砖混' }]"
          :disabled="disabled"
          :props="{label: 'label', value: 'label'}"
      ></u-select>
      <u-icon
          slot="right"
          name="arrow-right"
      ></u-icon>
    </u-form-item>
    <u-form-item
        label="主梁类型"
        prop="formData.kingpostType"
        borderBottom
        ref="item1"
        required
    >
      <u-select
          v-model="formData.kingpostType"
          placeholder="请选择主梁类型"
          :options="[{ label: '钢筋混凝土梁' }, { label: '钢梁' }, { label: '木梁' }, { label: '其他' } ]"
          :disabled="disabled"
          :props="{label: 'label', value: 'label'}"
      ></u-select>
      <u-icon
          slot="right"
          name="arrow-right"
      ></u-icon>
    </u-form-item>
    <u-form-item
        label="房屋类型"
        prop="formData.houseType"
        borderBottom
        ref="item1"
        required
    >
      <u-select
          v-model="formData.houseType"
          placeholder="请选择房屋类型"
          :options="[{ label: '个人屋顶' }, { label: '公共屋顶' }]"
          :disabled="disabled"
          :props="{label: 'label', value: 'label'}"
      ></u-select>
      <u-icon
          slot="right"
          name="arrow-right"
      ></u-icon>
    </u-form-item>
    <u-form-item
        label="屋顶类型"
        prop="formData.roofType"
        borderBottom
        ref="item1"
        required
    >
      <u-radio-group
          v-model="formData.roofType"
          placement="row"
          class="radio-group"
      >
        <u-radio
            class="item"
            iconColor="#113d48"
            :customStyle="{marginRight: '20px'}"
            active-color="#dab386"
            label="平顶屋"
            name="1"
        ></u-radio>
        <u-radio
            class="item"
            iconColor="#113d48"
            active-color="#dab386"
            label="斜屋顶"
            name="2"
        ></u-radio>
        <u-radio
            class="item"
            iconColor="#113d48"
            active-color="#dab386"
            label="其他"
            name="3"
        ></u-radio>
      </u-radio-group>
    </u-form-item>
    <u-form-item
        label="拍摄方式"
        prop="formData.shootType"
        borderBottom
        ref="item1"
        required
    >
      <u-radio-group
          v-model="formData.shootType"
          placement="row"
          class="radio-group"
      >
        <u-radio class="item"
                 :customStyle="{ marginRight: '20px'}"
                 active-color="#dab386"
                 label="无人机拍摄"
                 name="1"
        ></u-radio>
        <u-radio
            class="item"
            active-color="#dab386"
            label="手机拍摄"
            name="2"
        ></u-radio>
      </u-radio-group>
    </u-form-item>
    <u-form-item
        label="禁飞图片"
        prop="formData.noFlyImgs"
        borderBottom
        ref="item1"
        required
        v-if="formData.shootType === '2'"
    >
      <view>
        <u-row :gutter="10">
          <u-col :span="4">
            <image-upload v-model="formData.noFlyImgs"/>
          </u-col>
          <u-col :span="4">
            <image-upload v-model="formData.noFlyImgs1" style="margin-left: 10px"/>
          </u-col>
          <u-col :span="4"></u-col>
        </u-row>
      </view>
    </u-form-item>
    <u-form-item
        label="屋顶照片"
        prop="formData.roofPhotoOne"
        borderBottom
        ref="item1"
        required
    >
      <view>
        <u-row :gutter="10">
          <u-col :span="4">
            <image-upload v-model="formData.roofPhotoOne"/>
            <view class="roof-subtitle mb-10">俯拍图</view>
          </u-col>
          <u-col :span="4">
            <image-upload v-model="formData.roofPhotoTwo"/>
            <view class="roof-subtitle mb-10">角度南</view>
          </u-col>
          <u-col :span="4">
            <image-upload v-model="formData.roofPhotoThree"/>
            <view class="roof-subtitle mb-10">东南角</view>
          </u-col>
        </u-row>
        <u-row :gutter="10">
          <u-col :span="4">
            <image-upload v-model="formData.roofPhotoFour"/>
            <view class="roof-subtitle">西南角</view>
          </u-col>
          <u-col :span="4">
            <image-upload v-model="formData.roofPhotoInterior"/>
            <view class="roof-subtitle">房屋内部</view>
          </u-col>
          <u-col :span="4">
            <image-upload v-model="formData.dimensionsPhotoThickness"/>
            <view class="roof-subtitle">楼顶厚度</view>
          </u-col>
        </u-row>
        <u-row :gutter="10">
          <u-col :span="4">
            <image-upload v-model="formData.roofPhotoFive"/>
            <view class="roof-subtitle">补充</view>
          </u-col>
          <u-col :span="4">
            <image-upload v-model="formData.roofPhotoSix"/>
            <view class="roof-subtitle">补充</view>
          </u-col>
          <u-col :span="4"></u-col>
        </u-row>
      </view>
    </u-form-item>
    <u-form-item
        label="屋顶视频"
        prop="formData.roofValue"
        borderBottom
        ref="item1"
        required
    >
      <image-upload v-model="formData.roofValue" accept="video" />
    </u-form-item>
    <u-form-item
        label="房产证"
        prop="formData.houseOwnership"
        borderBottom
        ref="item1"
        required
    >
      <u-row :gutter="10">
        <u-col :span="4">
          <image-upload v-model="formData.houseOwnership" />
        </u-col>
        <u-col :span="4">
          <image-upload v-model="formData.houseOwnershipOne" />
        </u-col>
        <u-col :span="4">
          <image-upload v-model="formData.houseOwnershipTwo" />
        </u-col>
      </u-row>
    </u-form-item>
    <u-form-item
        label="踏勘记录表"
        prop="formData.surveyRecord"
        borderBottom
        ref="item1"
        required
    >
      <u-row :gutter="10">
        <u-col :span="4">
          <image-upload v-model="formData.surveyRecord" />
        </u-col>
        <u-col :span="4">
          <image-upload v-model="formData.surveyRecord2" />
        </u-col>
        <u-col :span="4"></u-col>
      </u-row>
    </u-form-item>
    <u-form-item
        label="用户手持明白纸照片"
        prop="formData.whitePaperPhoto"
        borderBottom
        ref="item1"
        required
    >
      <image-upload v-model="formData.whitePaperPhoto" />
    </u-form-item>
    <u-form-item
        label="备案文件"
        prop="formData.filingDocumentPhoto"
        borderBottom
        ref="item1"
    >
      <u-row :gutter="10">
        <u-col :span="4">
          <image-upload v-model="formData.filingDocumentPhoto" />
        </u-col>
        <u-col :span="4">
          <image-upload v-model="formData.filingDocumentPhoto2" />
        </u-col>
        <u-col :span="4">
          <image-upload v-model="formData.filingDocumentPhoto3" />
        </u-col>
      </u-row>
    </u-form-item>
    <u-form-item
        label="并网距离"
        prop="formData.distance"
        borderBottom
        ref="item1"
        required
    >
      <u-input
          v-model="formData.distance"
          border="none"
          placeholder="请输入并网距离"
      >
        <template slot="suffix">米</template>
      </u-input>
    </u-form-item>
    <u-form-item
        label="方位角"
        prop="formData.azimuth"
        borderBottom
        ref="item1"
        required
    >
      <view>
        <u-radio-group
            v-model="formData.azimuth"
            placement="row"
            class="radio-group"
        >
          <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="正南" :name="AZIMUTH.SOUTH"></u-radio>
          <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="南偏东" :name="AZIMUTH.SOUTH_EAST"></u-radio>
          <u-radio class="item" active-color="#dab386" label="南偏西" :name="AZIMUTH.SOUTH_WEST"></u-radio>
        </u-radio-group>
        <view v-if="formData.azimuth !== AZIMUTH.SOUTH">
          <u-input
              v-model="formData.angle"
              border="none"
              placeholder="请输入角度"
              :customStyle="{marginTop: '10px'}"
          ></u-input>
        </view>
      </view>
    </u-form-item>
    <u-form-item
        label="建筑高度"
        prop="formData.buildingHeight"
        borderBottom
        ref="item1"
        required
    >
      <u-input
          v-model="formData.buildingHeight"
          border="none"
      >
        <template slot="suffix">米</template>
      </u-input>
    </u-form-item>
    <u-form-item
        label="还款方式"
        prop="formData.repaymentMethod"
        borderBottom
        ref="item1"
    >

      <u-radio-group
          v-model="formData.repaymentMethod"
          placement="row"
          class="radio-group"
      >
        <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="一类卡" name="0"></u-radio>
        <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="二类卡" name="1"></u-radio>
        <u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="光E宝" name="2"></u-radio>
        <!--<u-radio class="item" active-color="#dab386" :customStyle="{marginRight: '20px'}" label="其他" name="0"></u-radio>-->
      </u-radio-group>
    </u-form-item>
    <u-form-item
        label="备注"
        prop="formData.remarks"
        ref="item1"
    >
      <u--textarea v-model="formData.remarks" placeholder="请输入备注" count  border="none"></u--textarea>
    </u-form-item>
  </view>
</template>

<style scoped lang="scss">
.module{
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px 20px 0px 20px;
  &:last-child{
    margin-bottom: 0px;
  }
  &__title{
    font-size: 16px;
    border-bottom: 1px solid #eee;
    color: #113d48;
    padding-bottom: 10px;
    &__text{
      margin-left: 5px;
    }
  }
}

.roof-subtitle{
  text-align: center;
  color: #888;
}
.mb-10{
  margin-bottom: 10px;
}
.ml-15{
  margin-left: 15px;
}
</style>
